<template>
  <o-option v-bind="attrs" ref="optionRef">
    <el-tooltip
      :content="attrs.label"
      placement="top"
      :disabled="contextRef?.offsetWidth < optionRef?.select?.selectRef?.offsetWidth - 52"
    >
      <div
        class="iclass-text-ellipsis"
        style="display: inline-block"
        :style="{ maxWidth: mWidth + 'px' }"
        ref="contextRef"
      >
        <slot name="default">
          {{ attrs.label }}
        </slot>
      </div>
    </el-tooltip>
  </o-option>
</template>
<script setup>
const attrs = useAttrs()
const optionRef = ref()
const contextRef = ref()
const mWidth = ref(66)
setTimeout(() => {
  mWidth.value = optionRef.value?.select?.selectRef?.offsetWidth - 52
}, 500)
watchEffect(() => {
  mWidth.value = optionRef.value?.select?.selectRef?.offsetWidth - 52
})
</script>

<style scoped>
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
